<!-- Conic Launcher -->
<!-- Copyright 2022-2026 Broken-Deer and contributors. All rights reserved. -->
<!-- SPDX-License-Identifier: GPL-3.0-only -->

<template>
  <div class="game-page-main">
    <div class="row-1">
      <div class="side-name">
        <div
          style="display: flex; justify-content: space-between; align-items: center; height: 100%">
          <p style="margin-left: 4px">{{ $t("game.instances") }}</p>
          <button
            class="side-button"
            @click="dialogStore.createInstance.visible = true"
            style="margin-right: 6px">
            <AppIcon name="add" :size="16"></AppIcon>
          </button>
        </div>
      </div>
      <instance-list></instance-list>
    </div>
    <div class="row-2">
      <instance-card
        :button-loading="buttonLoading"
        @launch="launch"
        @install="install"
        :error-type="errorType"></instance-card>
      <instance-details style="margin-top: 16px"></instance-details>
    </div>
  </div>
</template>

<script setup lang="ts">
import InstanceCard from "./game/InstanceCard.vue";
import InstanceDetails from "./game/InstanceDetails.vue";
import InstanceList from "./game/InstanceList.vue";
import { onMounted, ref, watch, type Ref } from "vue";
import AppIcon from "@/components/AppIcon.vue";
import { useDialogStore } from "@/store/dialog";
import { useInstanceStore } from "@/store/instance";
import { useConfigStore } from "@/store/config";

const dialogStore = useDialogStore();
const instanceStore = useInstanceStore();
const configStore = useConfigStore();

onMounted(() => {
  instanceStore.fetchInstances();
});

const installing = ref(false);
const buttonLoading = ref(false);
const errorType: Ref<"launch" | "install" | undefined> = ref();

watch(
  () => [
    configStore.accessibility.hide_latest_release,
    configStore.accessibility.hide_latest_snapshot,
  ],
  ([hideLatestRelease, hideLatestSnapshot]) => {
    const currentInstanceName = instanceStore.currentInstance.config.name;
    if (currentInstanceName !== "Latest Release" && currentInstanceName !== "Latest Snapshot") {
      return;
    }
    const instances = instanceStore.instances;
    if (!hideLatestRelease) {
      instanceStore.currentInstance = instances[1];
    } else if (!hideLatestSnapshot) {
      instanceStore.currentInstance = instances[1];
    } else {
      instanceStore.currentInstance = instances[1];
    }
  },
);

const install = () => {
  installing.value = true;
  // TODO: Invoke install and show progress use new api
};
const launch = () => {
  buttonLoading.value = true;
  // TODO: Invoke launch and show progress use new api
};
</script>

<style lang="less" scoped>
.game-page-main {
  width: 100%;
  height: 100%;
  display: flex;
}

.row-1 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.row-1 {
  width: 328px;
  padding: 24px 24px;
  flex-shrink: 0;
}

.row-2 {
  width: 100%;
  overflow-y: auto;
  padding: 24px 24px 24px 0;
}

.side-name {
  width: 100%;
  height: 32px;
  font-size: 14.5px;
  margin-bottom: 8px;
}

.side-button {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 4px;
  height: 20px;
  width: 20px;
  font-size: 10px;
}

.side-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.side-button:active {
  background: rgba(255, 255, 255, 0.08);
}

.side-button i::before {
  transform: scale(0.7);
}
</style>
